<template>
  <div class="Home-page">
    <div class="van-calendar__header-subtitle">
      <van-nav-bar
          title="登录"
          left-text="返回"
          left-arrow
          @click-left="go_back"
      />
    </div>
    <div class="Home-contre">
      <van-form validate-first>
        <van-field
            v-model="formant.phone"
            label = "手机号"
            center
            maxlength="11"
            type="number"
            input-align="left"
            clearable
            placeholder="轻输入手机号"
            :rules="[{ pattern, message: '请输入正确内容' }]"
        >
          <template #button>
            <van-button size="small_set" round type="primary" v-if="is_show" @click="change_show_state">
              发送验证码
            </van-button>
            <van-button disabled size="small_get" round type="primary" v-else>
              <van-count-down :time="this.$store.state.TIME_COUNT" @finish="change_show_state"  format="剩余时间 ss 秒"/>
            </van-button>
          </template>
        </van-field>

        <van-field
            v-model="formant.code"
            label = "验证吗"
            center
            input-align="left"
            clearable
            type="number"
            maxlength="6"
            placeholder="轻输入验证码"
        ></van-field>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" @click="onFailed">提交</van-button>
        </div>
      </van-form>
      <van-row type="flex" justify="space-between">
        <van-col span="6"><router-link to="/home/enroll">前往注册</router-link></van-col>
        <van-col span="6"><router-link to="/home/forget">忘记密码</router-link></van-col>
      </van-row>
    </div>
  </div>

</template>

<script>
import {reactive,ref} from "vue"
import {Toast} from "vant";

export default {
  name: "login",
  data(){
    return{
      pattern:/^1[3456789]\d{9}$/,
    }
  },
  setup(){
      const formant = reactive({
        phone:ref(""),
        code:ref("")
      })
    const is_show = ref(true)
    return {formant, is_show}
  },
  methods:{
    go_back: function() {
      this.$router.go(-1)
    },
    change_show_state: function() {
      Toast.success("已发送验证码，请前往查看")
      this.is_show = !this.is_show
    },
    onFailed:function() {
      Toast.loading('正在登录...');
      console.log(JSON.stringify(this.formant));
    }
  }
};


/** todo 一个简单的倒计时功能
 * 代码引用 <p>还有 {{60-time}}s 过期</p>
 * 还可以使用 vant 的组件 <van-count-down :time="6*1000" @finish="change_show_state"  format="还有 ss 秒"/>
 */
// function phone_code() {
//   const data = reactive({
//     is_show:ref(true),
//     time: ref(0),
//   })
//
//   let timer;
//
//   onMounted(() => {
//     timer = setInterval(() => {
//       if(data.time>=3){
//         onUnmounted()
//         data.time = 0
//         data.is_show=true
//       }else{
//         data.time++
//       }
//     }, 1000)
//   })
//
//   onUnmounted(()=>{
//     clearInterval(timer)
//   })
//
//   return toRefs(data)
// }

</script>

<style scoped>

</style>
